import React from 'react';
import userOperateRecorder from "../component/recorder"

class Listener extends React.Component {

    constructor(props) {
        super(props);
        // 初始化鼠标点击次数
        this.state = { count: 0 };
    }

    componentDidMount() {
        // 调用用户操作监控组件
        userOperateRecorder()
    };

    // 鼠标点击计数
    mouseCount() {
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return (
            <div className="Listener" onMouseDown={() => this.mouseCount()} >
                <header className="App-header">
                    {/* 为了验证事件有没有漏记，同时全局监听了鼠标点击事件 */}
                    <div className="mouse-count">鼠标点击了{this.state.count}次</div>
                    <div >例如我现在在开发网上商城、我要监听用户点击下方商品种类的次数：</div>
                    {/* 被监听事件只用定义"data-listened"属性，并指定业务类型，即"data-listened"的值 */}
                    {/* "data-listened"属性说明：H5支持自定义属性标签，规范都是"data-"作为前缀 */}
                    <button href="#" data-listened="moudule-entry-telephone">手机类</button>
                    <button href="#" data-listened="moudule-entry-office">办公类</button>
                    <button href="#" data-listened="moudule-entry-sport">运动类</button>
                    <button href="#" data-listened="moudule-entry-book">图书类</button>
                    <button href="#" data-listened="moudule-entry-fashion">时尚类</button>
                    <button href="#" data-listened="moudule-entry-clothes">穿搭类</button>

                </header>
            </div >
        );
    }
}

export default Listener;
